<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资料管理</title>
<style>
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #e7f2fb;
}

.header {
  background-color: #007bff;
  color: white;
  padding: 15px;
  text-align: center;
}

.upload-material {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  color: #007bff;
  cursor: pointer;
}

.search-bar {
  margin: 10px;
  display: flex;
  justify-content: space-between;
}

.search-input {
  flex-grow: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.search-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.material-list {
  margin: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
}

.material-item {
  padding: 10px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.material-item:last-child {
  border-bottom: none;
}

.material-name {
  flex-grow: 1;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  width: 90px; /* Adjust width based on actual buttons */
}

.action-button {
  color: #007bff;
  cursor: pointer;
}
</style>
</head>
<body>

<div class="header">资料管理</div>

<button class="upload-material">上传资料</button>

<div class="search-bar">
  <input type="text" class="search-input" placeholder="搜索资料...">
  <button class="search-button">搜索</button>
</div>

<div class="material-list">
  <div class="material-item">
    <span class="material-name">数学单元练习.pdf</span>
    <div class="action-buttons">
      <span class="action-button">查看</span>
      <span class="action-button">下载</span>
      <span class="action-button">删除</span>
    </div>
  </div>
  <!-- More materials -->
</div>

</body>
</html>
